<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        div p {
            background-color: lightskyblue;
        }
        div>b{
            background-color: lightpink;
        }
        b{
            display: block;
        }
        #selectSpan+i{
            background-color: lightgray;
        }
        #selectAllNext~u{
            background-color: lightcyan;
        }
    </style>
</head>
<div>
    <div>
        <h3>选取所有div的后代p元素 div p </h3>
        <span>
            <p>层级：div-span-p</p>
        </span>
        <p>层级：div-p</p>
    </div>
    <div>
        <h3>只选取直接后代（一级）的元素 div>b</h3>
        <b>层级 div-b</b>
        <span>
                <b>层级 div-span-b</b>
        </span>
    </div>
    <div>
        <h3>选择相邻的一个元素(下一个) span+i</h3>
        <span id='selectSpan'>层级 div-span</span>
        <i>层级 div-i(位于div-span后面)</i>
        <i>层级 div-i(位于div-span后面第二个)</i>
    </div>
    <div>
        <h3>选择相邻的所有元素（后面） span~u</h3>
        <span id='selectAllNext'>层级 div-span</span>
        <u>层级div-u （位于div-span后面）</u>
        <u>层级div-u （位于div-span后面第二个）</u>
    </div>
</div>

</html>